<template>
  <div class="gItemCon" :class="{categoryCss:categoryCss}" @click="goDetails">
    <div class="gItemImg">
      <img v-lazy="itemImg" @load="loaded" />
    </div>
    <div class="gItemTitle">{{goodsItem.title}}</div>
    <div class="gItemInfo">
      <span class="gItemPrice">{{goodsItem.price | rmb}}</span>
      <span class="gItemCollect">{{goodsItem.cfav}}</span>
    </div>
  </div>
</template>

<script>
export default {
  name: "GoodsItem",
  props: {
    goodsItem: {
      type: Object,
      default() {
        return {};
      }
    }
	},
	data(){
		return{
			categoryCss:this.$route.name=='category'
		}
	},
	computed:{
		itemImg(){
			return 'show' in this.goodsItem ? this.goodsItem.show.img : this.goodsItem.image || this.goodsItem.img
		}
	},
	methods:{
		loaded(){
				this.$bus.$emit("itemImgLoad")
		},
		goDetails(){
			if(this.goodsItem.iid){
				this.$router.push("/details/"+this.goodsItem.iid)
			}else{
				location.href= this.goodsItem.item_url
			}
		}
	},
	watch:{
	}
};
</script>

<style>
.gItemImg img {
  width: 100%;
  height: 100%;
}
.gItemTitle {
  width: 100%;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  margin: 4px 0 2px;
}
.gItemInfo .gItemPrice {
  color: var(--color-high-text);
}
.gItemInfo .gItemCollect {
  padding-left: 30px;
  position: relative;
}
.gItemInfo .gItemCollect::before {
  content: "";
  position: absolute;
  width: 20px;
  height: 16px;
  left: 6px;
  top: 0;
  background: url('../../../assets/images/common/collect.svg') 0 0/26px 16px;
}

/* 如果在分类页面，那么我将文字改小一点 */
.categoryCss{
	font-size: 14px !important;
}
</style>
